import React, { useState } from 'react';
import { UploadOutlined } from '@ant-design/icons';
import { Button, Card, Form, Input, message, Select, Space, Upload } from 'antd';
import { genChartAsync } from '@/services/ant-design-pro/api';
import { useForm } from 'antd/es/form/Form';

const { Option } = Select;

// 表单项布局配置
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

// 生成图表组件
const GenChartAsync: React.FC = () => {
  const [submitting, setSubmitting] = useState<boolean>(false);
  const [form] = useForm();

  // 处理表单提交事件
  const onFinish = async (values: any) => {
    setSubmitting(true);
    const params = {
      ...values,
      file: undefined,
    };
    const res = await genChartAsync(params, {}, values.file.file);
    setSubmitting(false);
    if (res.code !== 0) {
      message.error(res.message);
      return;
    }
    message.success('正在为您分析数据，请稍后在我的图表页查看结果');
    form.resetFields();
  };

  return (
    <div>
      <Card title="智能分析">
        <Form form={form} name="validate_other" {...formItemLayout} onFinish={onFinish}>
          <Form.Item name="chartName" label="图表名称">
            <Input />
          </Form.Item>

          <Form.Item name="type" label="图表类型" hasFeedback>
            <Select>
              <Option value="折线图">折线图</Option>
              <Option value="柱状图">柱状图</Option>
              <Option value="堆叠图">堆叠图</Option>
              <Option value="散点图">散点图</Option>
              <Option value="饼图">饼图</Option>
              <Option value="雷达图">雷达图</Option>
              <Option value="K线图">K线图</Option>
              <Option value="漏斗图">漏斗图</Option>
              <Option value="3D柱状图">3D柱状图</Option>
              <Option value="3D散点图">3D散点图</Option>
            </Select>
          </Form.Item>

          <Form.Item
            name="goal"
            label="分析诉求"
            rules={[
              {
                required: true,
                message: '请输入分析诉求',
              },
            ]}
          >
            <Input.TextArea showCount maxLength={200} />
          </Form.Item>

          <Form.Item
            name="file"
            label="原始数据"
            extra=".xlsx .xls格式"
            rules={[
              {
                required: true,
                message: '请上传原始数据',
              },
            ]}
          >
            <Upload listType={'picture'} name="file" maxCount={1} beforeUpload={() => false}>
              <Button icon={<UploadOutlined />}>上传文件</Button>
            </Upload>
          </Form.Item>

          <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
            <Space>
              <Button type="primary" htmlType="submit" loading={submitting} disabled={submitting}>
                智能分析
              </Button>
              <Button htmlType="reset">重置</Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};
export default GenChartAsync;
